import useGameDataStore from '@/store/gameData'
import { defineComponent } from 'vue'
import Card from './Card'

export default defineComponent({
  name: 'RemoveArea',
  setup() {
    const gameDataStore = useGameDataStore()
    const { moveRemoveAreaCard } = gameDataStore
    /* render 函数 */
    return () => {
      const { removeAreaCards } = gameDataStore
      return (
        <div class="m-2 w-48 h-16 relative border-2 border-gray-500 border-solid">
          {removeAreaCards.map((level, levelIndex) => {
            return level.map((card, cardIndex) => {
              if (!card) return null
              const style = {
                left: `${cardIndex * 4}rem`,
                zIndex: levelIndex,
                backgroundColor: 'white'
              }
              return (
                <div
                  class="absolute"
                  style={style}
                  onClick={() =>
                    moveRemoveAreaCard(card, levelIndex, cardIndex)
                  }>
                  <Card name={card} />
                </div>
              )
            })
          })}
        </div>
      )
    }
  }
})
